import React, { Component } from 'react';
import '../style/Index/Search/searchdetail.css'
import { LeftOutline, MinusOutline, AddOutline, ArrowDownCircleOutline } from 'antd-mobile-icons'
import { Collapse, DotLoading, Result } from 'antd-mobile'
import services from '../api/interface'
import { Empty } from 'antd-mobile'
class SearchDetail extends Component {
    state = {
        setailkey: []
    }
    async componentDidMount() {
        var res = await services.pro.pro_search({ keyword: this.props.location.state.key })
        this.setState({
            setailkey: res.data.data
        })
    }
    onClick() {
        this.props.history.go(-1)
    }
    onhandlClick(item){
        // this.props.history.push({pathname:'detail',state:{id:this.state.setailkey.proid}})
        this.props.history.push({pathname:'/detail',state:{id:item.proid}})
        console.log(12);
    }
    render() {
        return (
            <div className='searchdetail'>
                <div className="stopp">
                    <span onClick={() => { this.onClick() }}>
                        <LeftOutline />
                    </span>
                    <input type="text" placeholder='清风抽纸' />
                    <div className="anniu" ></div>
                </div>
                <div className="shaxuan">
                    <Collapse
                        defaultActiveKey={['']}
                        arrow={active => (active ? <MinusOutline /> : <AddOutline />)}
                    >
                        <Collapse.Panel key='1' title='全部商品'>
                            选择你想要的商品
                        </Collapse.Panel>
                        <Collapse.Panel
                            key='2'
                            title='筛选'
                            arrow={<ArrowDownCircleOutline />}
                        >
                            价格 销量 品牌
                        </Collapse.Panel>

                    </Collapse>
                    
                </div>
                <div className="setailmain">
                    {
                        this.state.setailkey == null ? <Empty description='暂无数据' />  : this.state.setailkey.map((item, index) => {
                            return (
                                <div className="stboxx" key={index} onClick={()=>{this.onhandlClick(item)}}>
                                    <div className="stboxleft">
                                        <img src={item.img1} alt="" />
                                    </div>
                                    <div className="stboxright">
                                        <div className="stboxright_up">
                                            {item.proname}
                                        </div>
                                        <div className="stboxright_bom">
                                            ￥{item.originprice}
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div >
        );
    }
}

export default SearchDetail;